<script setup>
import {ref} from "vue";
import {onHide, onLoad, onPageScroll, onReachBottom, onShow, onUnload} from '@dcloudio/uni-app';
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging.js"

const paging = ref(null)

let dataList = ref([])
useZPaging(paging)

const scanPath = ref()
const scan = () => {
  uni.scanCode({
    onlyFromCamera: true,
    scanType: "qrCode",
    success: function (res) {
      console.log('条码类型：' + JSON.stringify(res));
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
      scanPath.value = res.path
    }
  });
}

const messageList = ref([
  {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }, {
    "id": 1,
    "user_id": 6,
    "title": "冒大仙火锅冒菜麻辣烫（花果园中心店）",
    "news_content": "900841701343057914订单已完成",
    "status": 0,
    "created_at": "2024-10-18 07:11:35",
    "updated_at": "2024-10-18 07:11:35"
  }
])

onLoad(() => {

})

onPageScroll(() => {
})
onReachBottom(() => {
})

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  // dataList.value = messageList
  paging.value.complete(messageList.value);
}

const time = ref()
const showMessage = ref(false)
const close = () => {
  showMessage.value = false
  clearTime()
}
const toPage = (item) => {
  showMessage.value = true
  time.value = setTimeout(() => {
    showMessage.value = false
  }, 3000)
}
const clearTime = () => {
  if (time.value) {
    clearInterval(time.value)
  }
}
onUnload(() => {
  clearTime()
})
onHide(() => {
  clearTime()
})
onShow(() => {
  clearTime()
})
const toMessage = () => {
  uni.navigateTo({url: ''})
}
const url = ref()
const webviewStyles = ref({
  progress: {
    color: '#FECC32'
  }
})
const onPostMessage = (e) => {
  console.log('快来onPostMessage---------')
  console.log('webview的', e)
  console.log('webview的webview', webview.value)
  uni.showToast({title: "onPostMessage" + e, icon: "none", duration: 3000})
}
const webview = ref()
const handlerMessage = (e) => {
  uni.navigateBack()
  console.log('快来handlerMessage---------')
  console.log('webview的', e)
  console.log('webview的webview', webview.value)
  uni.showToast({title: "handlerMessage" + e, icon: "none", duration: 3000})
}
const load = (e) => {
  console.log('webview load--->', e)
}


// -----------------------------------12.10---------------------------------
const okBack = () => {
  uni.navigateBack()
}
</script>

<template>
  <test></test>
  <view>
    <view><button @click="main">识别</button></view>
    <view>{{ dataText }}</view>
  </view>
  <!--  <view class="raffle_content" style="height: 100%;width: 100%;background-color: #b9dd4b">-->
  <!--    <view class="navbar" :style="{background: `rgba(232, 57, 47, 0`}">-->
  <!--      <up-status-bar></up-status-bar>-->
  <!--      <view class="back_content">-->
  <!--        <view style="padding-left: 10rpx;"></view>-->
  <!--        <view @click="okBack" style="padding: 20rpx;z-index: 100">-->
  <!--          <up-icon name="arrow-left"-->
  <!--                   color="white"-->
  <!--                   size="16"></up-icon>-->
  <!--        </view>-->
  <!--        <text-->
  <!--            style="font-weight: 400;font-size: 28rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;color: white">-->
  <!--          幸运抽奖-->
  <!--        </text>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--    <up-status-bar></up-status-bar>-->
  <!--    <view style="height: 30rpx"></view>-->
  <!--    <view style="margin-top: 50px;">-->
  <!--      <view>-->
  <!--        <text class="teach_step">第一步</text>-->
  <!--      </view>-->
  <!--      <view style="height: 160rpx"></view>-->
  <!--      <view>-->
  <!--        <text class="teach_step">-->
  <!--          第二步-->
  <!--        </text>-->
  <!--      </view>-->
  <!--      <view style="height: 160rpx"></view>-->
  <!--      <view>-->
  <!--        <text class="teach_step">-->
  <!--          第三步-->
  <!--        </text>-->
  <!--      </view>-->
  <!--      <view style="height: 160rpx"></view>-->
  <!--      <view>-->
  <!--        <text class="teach_step">-->
  <!--          第四步-->
  <!--        </text>-->
  <!--      </view>-->
  <!--      <view style="height: 160rpx"></view>-->
  <!--      <view>-->
  <!--        <text class="teach_step">-->
  <!--          第五步-->
  <!--        </text>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--  </view>-->

  <!--  <web-view :webview-styles="webviewStyles"-->
  <!--            src="https://h5.waimai.meituan.com/waimai/mindex/home"-->
  <!--            @message="handlerMessage"-->
  <!--            @onPostMessage="onPostMessage" @load="load"-->
  <!--            ref="webview"></web-view>-->
  <!--  <view>-->
  <!--    <view>-->
  <!--      <up-button @click="scan">扫码</up-button>-->
  <!--    </view>-->
  <!--    <view>{{ scanPath }}</view>-->
  <!--  </view>-->
  <!--  <up-popup :show="showMessage" overlayOpacity="0.01" closeOnClickOverlay mode="top" bgColor="transparent" @close="close" @open="open">-->
  <!--    <view style="margin: 30rpx;border-radius: 20rpx;padding: 30rpx;background-color: #ffba3d;display: flex;align-items: center">-->
  <!--      <text style="color: white;flex: 1">出淤泥而不染，濯清涟而不妖</text>-->
  <!--      <u-button style="width: 100rpx;height: 50rpx;background-color: #ff7400;color: white;border-radius: 60rpx" text=查看 @click="toMessage"></u-button>-->
  <!--    </view>-->
  <!--  </up-popup>-->
  <!--  <z-paging ref="paging" v-model="dataList"-->
  <!--            auto-show-back-to-top-->
  <!--            use-page-scroll-->
  <!--            @query="queryList"-->
  <!--            :refresher-complete-delay="600">-->
  <!--    <template #top>-->
  <!--      <u-navbar-->
  <!--          title="消息列表"-->
  <!--          placeholder-->
  <!--          titleStyle="color:black"-->
  <!--          leftIconColor="#000"-->
  <!--          auto-back-->
  <!--      >-->
  <!--      </u-navbar>-->
  <!--    </template>-->
  <!--    &lt;!&ndash; 如果希望其他view跟着页面滚动，可以放在z-paging标签内 &ndash;&gt;-->
  <!--    <view v-for="(item,index) in dataList" :key="index">-->
  <!--      <view class="item" @click="toPage(item)">-->
  <!--        <view style="display: flex">-->
  <!--          <u-icon name="star"></u-icon>-->
  <!--          <text class="title">-->
  <!--            {{ item.title }}-->
  <!--          </text>-->
  <!--        </view>-->
  <!--        <view style="height: 1px;background-color: #EEEEEE;margin: 20rpx 0"></view>-->
  <!--        <view style="font-size: 24rpx;color: black;font-weight: bold">-->
  <!--          {{ item.news_content }}-->
  <!--        </view>-->
  <!--        <view style="height: 20rpx"></view>-->
  <!--        <view style="font-size: 22rpx;color: #888888;">-->
  <!--          {{ item.created_at }}-->
  <!--        </view>-->
  <!--        <view style="height: 1px;background-color: #EEEEEE;margin: 20rpx 0"></view>-->
  <!--        <view style="display: flex;align-items: center">-->
  <!--          <text style="font-size: 22rpx;color: #666666">查看详情</text>-->
  <!--          <view class="dot"></view>-->
  <!--          <view style="flex: 1"></view>-->
  <!--          <u-icon name="arrow-right"></u-icon>-->
  <!--        </view>-->
  <!--      </view>-->
  <!--    </view>-->
  <!--  </z-paging>-->

  <!--  <view class="box">-->
  <!--    <view style="height: 100%;width: 100%;background: #ff9f5d;border-radius: 20rpx"></view>-->
  <!--  </view>-->

  <!--  <lime-painter />-->
  <!--  <view style="margin: 100rpx 0;display: flex;align-items: center;justify-content: center;text-align: center">-->
  <!--    <view style="width: 650rpx;height: 1112rpx;">-->
  <!--      <l-painter-->
  <!--          css="width: 650rpx;height: 1112rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ff971b 0%, #ff5000 100%)"-->
  <!--          @fail="fail"-->
  <!--          @done="done"-->
  <!--          pathType="url"-->
  <!--          ref="poster"-->
  <!--          performance>-->
  <!--        <l-painter-image src="https://lsz.lszbg.com/imgs/group/xb_bg.png"-->
  <!--                         css="width: 650rpx; height: 1112rpx; object-fit: contain; background: #f5f5f5;position: absolute;z-index: -1"/>-->
  <!--        <l-painter-view-->
  <!--            css="width: 430rpx;margin-top: 32rpx; margin-left: 110rpx;display: flex;align-items: center;justify-content: center">-->
  <!--          <l-painter-image-->
  <!--              src="https://thirdwx.qlogo.cn/mmopen/vi_32/uMDFaaiay0stvYVicsTO1e3icmaibsyjt1iavsh3d9yBeZXiaF0BWgyhNtOBtrPMHH21qSZvcOLR0CLaNAuxrwl2RR0p46sHrVF6icujMjuNHqBK8w/132"-->
  <!--              css="width: 58rpx;height: 58rpx;border: 2rpx solid #ffffff; box-sizing: border-box; border-radius: 50%;display: inline-block"/>-->
  <!--          <l-painter-text text="领食周边购"-->
  <!--                          css="display: inline-block; color: #ffffff; font-size: 36rpx; fontWeight: bold;margin-left: 10rpx;margin-top: 6rpx"/>-->
  <!--        </l-painter-view>-->
  <!--        <l-painter-view css="margin-top: 216rpx;margin-left: 90rpx">-->
  <!--          <l-painter-text text="小领已经帮我省了"-->
  <!--                          css="display: block; color: #000000; font-size: 28rpx;"/>-->
  <!--          <l-painter-text text="￥347.00"-->
  <!--                          css="display: block; color: #FC5722; font-size: 38rpx;margin-top: 30rpx;fontWeight: bold;"/>-->
  <!--          <l-painter-text text="解锁小霸王称号"-->
  <!--                          css="display: block; color: #FC5722; font-size: 33rpx;margin-top: 30rpx;fontWeight: bold;"/>-->
  <!--          <l-painter-view css="margin-top: 30rpx;">-->
  <!--            <l-painter-text text="预计全年可省 "-->
  <!--                            css="display: inline-block; color: #000000; font-size: 28rpx;"/>-->
  <!--            <l-painter-text text="￥347.00"-->
  <!--                            css="display: inline-block; color: #FC5722; font-size: 28rpx;fontWeight: bold;"/>-->
  <!--          </l-painter-view>-->
  <!--          <l-painter-view css="margin-top: 80rpx;">-->
  <!--            <l-painter-text text="加入领食"-->
  <!--                            css="display: inline-block; color: #000000; font-size: 28rpx;width:370rpx"/>-->
  <!--            <l-painter-text text="239天"-->
  <!--                            css="display: inline-block; color: #FC5722; font-size: 28rpx;fontWeight: bold;"/>-->
  <!--          </l-painter-view>-->
  <!--          <l-painter-view css="margin-top: 50rpx;">-->
  <!--            <l-painter-text text="已抢霸王餐"-->
  <!--                            css="display: inline-block; color: #000000; font-size: 28rpx;width:370rpx"/>-->
  <!--            <l-painter-text text="27笔"-->
  <!--                            css="display: inline-block; color: #FC5722; font-size: 28rpx;fontWeight: bold;"/>-->
  <!--          </l-painter-view>-->
  <!--        </l-painter-view>-->

  <!--        <l-painter-view css="width: 650rpx;margin-top: 80rpx;text-align:center;">-->
  <!--          <l-painter-text text="来   领   食   ·   就   吃   霸   王   餐"-->
  <!--                          css="display: inline-block; color: #FFE5D2; font-size: 32rpx;font-weight: bold;"/>-->
  <!--        </l-painter-view>-->
  <!--        <l-painter-text text="扫码"-->
  <!--                        css="display: block; color: #000000; font-size: 32rpx;font-weight: bold;margin-top: 90rpx;margin-left:30rpx;"/>-->
  <!--        <l-painter-text text="加入领食，边吃边赚"-->
  <!--                        css="display: block; color: #000000; font-size: 28rpx;font-weight: bold;margin-top: 20rpx;margin-left:30rpx;"/>-->
  <!--        <l-painter-view css="text-align:center;position: absolute;background:#FFFFFF;border-radius: 50%;bottom:20rpx;right:30rpx;-->
  <!--            border: 6rpx solid #ffffff; box-sizing: border-box;width: 150rpx;height: 150rpx; ">-->
  <!--          <l-painter-image-->
  <!--              src="https://lsz.lszbg.com/public/uploads/poster/miniProgram/82332.png?t=1732603478"-->
  <!--              css="width: 138rpx;height: 138rpx;border-radius: 50%;margin:auto"/>-->
  <!--        </l-painter-view>-->
  <!--      </l-painter>-->
  <!--    </view>-->
  <!--  </view>-->
</template>
<style>
@property --deg {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}

.box {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  position: relative;
  z-index: 3;
}

.box::before {
  content: "";
  position: absolute;
  inset: -5rpx;
  z-index: -1;
}

.box::after {
  content: "";
  position: absolute;
  inset: -5rpx;
  z-index: -2;
  filter: blur(20px);
}

.box::before,
.box::after {
  border-radius: 20rpx;
  background: linear-gradient(var(--deg), #5e8aff, #ff80c5, #98f2ff);
  animation: border_dh 3s linear infinite;
}

@keyframes border_dh {
  to {
    --deg: 360deg;
  }
}
</style>
<style scoped lang="scss">

.raffle_content {
  position: relative;
}

.teach_step {
  background-color: #f1bd1a;
  padding: 10rpx 36rpx;
  border-radius: 0 30rpx 30rpx 0;
  font-size: 26rpx;
  color: black;
  font-weight: bold;
  box-shadow: 0 5rpx 6rpx #b48e1566;
}

.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-color: #e8392f;

  .back_content {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

.item {
  background-color: white;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}

.title {
  font-size: 26rpx;
  margin-left: 10rpx;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dot {
  height: 13rpx;
  width: 13rpx;
  background-color: #ff5c26;
  border-radius: 30rpx;
  margin-left: 10rpx;
}
</style>